import classnames from 'classnames'
import Icon from '@/components/icon/index'
import styles from './index.module.scss'
import { Article } from '@/types/data'
import dayjs from '@/plugin/dayjs/index'
import Image from '@/components/image/index'
import { useNavigate } from 'react-router-dom'

type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  article: Article
}

const ArticleItem = ({ article }: Props) => {
  const {
    title,
    cover: { type, images },
    aut_name,
    comm_count,
    pubdate
  } = article

  const navigate = useNavigate()
  return (
    <div className={styles.root} onClick={() => navigate(`/article/${article.art_id}`)}>
      <div className={classnames('article-content', type === 3 && 't3', type === 0 && 'none-mt')}>
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images &&
              images.map((imageSrc, index) => (
                <div key={index} className="article-img-wrapper">
                  {/* <img src={imageSrc} alt="" /> */}
                  {/* 自动移懒加载图片组件 */}
                  <Image src={imageSrc}></Image>
                </div>
              ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{aut_name}</span>
        <span>{comm_count}</span>
        <span>{dayjs(pubdate).fromNow()}</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
